//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：myItem.js
// 创建时间：2016年09月20日
// 创建人员：Panda
// 功能说明：my item组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';

import {
    FontSizes,
    Colors,
    UIConstants,
} from '../../common';
import Images from '../../images';
import Icon from 'react-native-vector-icons/Ionicons';
import PandaBadge from '../../components/badge/pandaBadge';

class MyItem extends Component {
    _onPress() {
        this.props.onPress && this.props.onPress(this.props.itemName);
    }

    render() {
        return (
            <TouchableOpacity style={styles.touchableopacity} onPress={() => {this._onPress()}}>
                <View style={styles.itemview}>
                    <Image source={this.props.imageSource} style={styles.image} resizeMode={Image.resizeMode.contain} />
                    <Text style={styles.itemtext}>{this.props.itemName}</Text>
                    {
                        this.props.isBadgeShow ?
                        <View style={{marginLeft: 8,}}>
                            <PandaBadge minWidth={8} minHeight={8} textStyle={{color: '#FFFFFF'}}>
                                {this.props.badgeText ? this.props.badgeText : ''}
                            </PandaBadge>
                        </View>
                        :
                        null
                    }
					<View style={styles.emptyview}>
                    </View>
                    
                    <Icon name={'ios-arrow-forward'} style={styles.forwardIcon} size={30} color={Colors.gray} />
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    touchableopacity: {
        backgroundColor: Colors.appBackground,
    },
    itemview: {
        height:50,
        flexDirection: 'row',
        alignItems:'center',
        justifyContent:'flex-start',
        marginLeft:20
    },
	emptyview:{
        marginRight: 100,
        flex:1,
    },
    image: {
        width: 24,
        height: 24,
    },
    itemtext: {
        fontSize: FontSizes.myItem,
        color: Colors.myItem,
        marginLeft: 20,
    },
menuiconright: {
        alignItems: 'flex-end',
        marginRight: 12,
        width: 24,
        height: 24,
    },
    forwardIcon:{
        marginRight:15
    }
});

export default MyItem;